<template>
  <div id="jx-start-virtual-machine" class="jx-virtual-machine" v-loading="deskLoading" :element-loading-text="deskLoadingText" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <el-dialog :close-on-click-modal="false" class="common-tool-dialog" title="上传实验报告" :visible.sync="dialogUpload" width="460px" @close="clearFiles">
      <el-form label-width="100px">
        <el-form-item label="文件上传 :">
          <el-upload ref="upload" :on-success="handleAvatarSuccess" :on-error="uploadError" :before-upload="uploadProgress" class="upload-demo" :action="'/tes/course/'
                            + $localstorage.getLocalStorage('setCourseId')+
                            '/course-test/paper/'+
                            $route.query.paperId
                            +'/student/'+
                            resQuestionData.answerSheetId
                            +'/report/'+
                            resQuestionData.id
                            " :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList" :auto-upload="false">
            <el-button @click="clearFiles" class="button-style">上传实验报告</el-button>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align:center;">
        <el-button class="button-style" @click="submitUpload">保存</el-button>
      </div>
    </el-dialog>
    <div class="jx-virtual-machine-header">
      <div class="jx-virtual-machine-header-logo fl" :title="resQuestionData.paperName" v-text="resQuestionData.paperName"></div>
      <div class="jx-virtual-machine-nav fl" v-show="!fullScreen">
        <span class="fl" :class="{ 'active': activeIndex == 1 }" @click="MachineNavTab(1)">实验题目</span>
        <span class="fl" :class="{ 'active': activeIndex == 2 }" @click="MachineNavTab(2)">实验报告</span>
      </div>
      <div class="jx-virtual-machine-header-dropout fr">
        <i class="iconfont icon-Group-" @click="DropoutVirtual"></i>
      </div>
      <div class="jx-virtual-machine-header-info fr">
        <span>虚拟机信息</span>
        <el-tooltip effect="light" placement="top">
          <div slot="content" v-if="VirtualMachineInfo.mode">
            模板类型：
            <span v-if="VirtualMachineInfo.mode == 1">单节点</span>
            <span v-else-if="VirtualMachineInfo.mode == 2">集群</span>
            <p style="line-height:20px;" v-for="(item, index) in VirtualMachineInfo.containers">
              {{ item.containerRole }}<br />IP：{{ item.ip }}<br/>配置：{{ item.flavor }} <br/>镜像名称：{{ item.imageName }}</p>
          </div>
          <div slot="content" v-else>
            暂无虚拟机信息
          </div>
          <i class="iconfont icon-jingshi"></i>
        </el-tooltip>
      </div>
      <div class="jx-virtual-machine-nav2 fr" v-if="VirtualMachineUrlArr.length > 1">
           <span class="fl" :class="{ active : MachineNavTabIndex == index}" v-for="(item, index) in VirtualMachineUrlArr"  @click="MachineNavTab2(index, item)">{{ item.containerRole }}</span>
       </div>
    </div>
    <div class="jx-virtual-machine-main">
      <!-- 实现手册 -->
      <div class="step-main-content fl" v-show="!fullScreen">
        <div v-show="activeIndex == 1" class="tab-main">
          <div class="jx-main-content markdown-body"  v-html="resQuestionData.content"></div>
        </div>
        <div v-show="activeIndex == 2" class="tab-main">
          <div class="clearfix tab-sub">
            <div class="fl" @click="subActiveIndex = 1" :class="{ 'active': subActiveIndex == 1 }">Word版实验报告</div>
            <div class="fl" @click="subActiveIndex = 2" :class="{ 'active': subActiveIndex == 2 }">在线版实验报告</div>
          </div>
          <div class="jx-main-content upload-content" style="height: 92%;" v-show="subActiveIndex == 1">
            <div class="excel-content">
              <div v-if="resQuestionData.fileName" style="margin-bottom:20px;">
                <img src="../../../assets/images/upload-success.png" />
              </div>
              <div style="padding:0px 0 20px;" v-if="resQuestionData.fileName">实验报告已上传</div>
              <div class="button-style" @click="dialogUpload = true">上传实验报告</div>
              <a class="model-download" target="_blank" href="javascript:;" @click="downloadModel">实验报告模板下载
                <i class="iconfont icon-tubiaozhizuo-"></i>
              </a>
            </div>
            <!-- <el-button class="button-style" @click="submitUpload">保 1存</el-button> -->
          </div>
          <div v-show="subActiveIndex == 2">
            <div class="jx-main-content">
              <mavonEditor class="step-main-editor" ref="question"></mavonEditor>
              <div class="step-main-btn-group">
                <button class="button-style" @click="NoteSave(1)">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="step-main-mirror fl">
        <div class="mirror-iframe" v-if="!mirrorIframeTip">
           <iframe name="iframeitem" v-for="(item, index) in VirtualMachineUrlArr" :id="'VirtualMachineIframe' + item.containerId"  v-show="MachineNavTabIndex == index" :src="item.desktopUrl" width="100%" :height="iframeHeight" frameborder="0"></iframe>
        </div>
        <div class="mirror-iframe-tip" v-if="mirrorIframeTip">
            <img src="./../../../assets/images/mirror_iframe_tip.png" />
            <span class="mirror-iframe-tip-text">{{ mirrorIframeTipText }}</span>
            <el-button class="button-style" @click="refreshVirtual(0)">刷 新</el-button>
        </div>
        <div class="step-main-mirror-side" v-if="fullScreen">
          <ul>
            <li @click="TopicDialog">
              <i class="iconfont icon-shiti"></i>题目</li>
            <li @click="ReportDialog">
              <i class="iconfont icon-ico_compile_thick"></i>报告</li>
          </ul>
        </div>
        <div class="step-main-mirror-dialog" :style="{ right: mirrorRightWidth + 'px'}" v-show="VirtualMachineUrl">
          <div class="step-main-mirror-dialog-block">
            <div class="step-main-mirror-dialog-box">
              <div class="mirror-dialog-header">
                计时
                <span v-if="resQuestionData">{{ getHour(resQuestionData.timeLeft) }}</span>
                <div style="margin-top:20px">实验题：{{ resQuestionData.score }}分</div>
              </div>
              <div class="mirror-dialog-item">
                <div class="item-btn">
                  <span @click="refreshVirtual(0)"><i class="iconfont icon-shuaxin"></i>刷新</span>
                </div>
                <div class="item-btn">
                  <span @click="InitVirtual">
                    <i class="iconfont icon-zhongxinshiyang"></i>初始化</span>
                  <el-tooltip class="item" effect="light" content="初始化实验环境" placement="left-end">
                    <i class="iconfont icon-wenti-m"></i>
                  </el-tooltip>
                </div>
                <div class="item-btn" v-if="!fullScreen">
                  <span @click="VirtualFullScreen(2)"><i class="iconfont icon-full-screen"></i>虚拟机全屏</span>
                </div>
                <div class="item-btn" v-if="fullScreen">
                  <span @click="VirtualFullScreen(3)"><i class="iconfont icon-full-screen"></i>退出全屏</span>
                </div>
                <div class="item-btn">
                  <span @click="ExperimentScreenshot"><i class="iconfont icon-jietu1"></i>实验截图</span>
                </div>
              </div>
              <div class="mirror-dialog-btn-box">
                <div @click="startEx(resQuestionData.preview)" v-if="resQuestionData.preview" class="button-style">上一题</div>
                <div @click="startEx(resQuestionData.next)" v-if="resQuestionData.next" class="button-style">下一题</div>
                <button @click="submitExam" class="button-style">交 卷</button>
              </div>
            </div>
          </div>
          <div class="step-main-mirror-arrow" @click="MirrorArrowFn" v-if="VirtualMachineUrl">
            <div>工具栏</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 实验截图 -->
    <el-dialog :close-on-click-modal="false" class="dialog-screenshot" title="实验截图" :visible.sync="dialogScreenshot" width="800px">
      <div class="dialog-content clear-fix">
        <img :src="dialogScreenshotUrl" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogScreenshotCopy" :data-clipboard-text="'<img src='+dialogScreenshotCopyUrl+'>'">复 制</el-button>
        <el-button class="button-style" @click="dialogScreenshotSave">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 学生实验手册显示隐藏 -->
    <el-dialog :close-on-click-modal="false" class="dialog-handbook" title="学生实验手册显示隐藏" :visible.sync="dialogHandbook" width="460px">
      <div class="dialog-content clear-fix">
        <p>控制该章节学生端所有实验手册显隐</p>
        <p>当前学生端实验手册为
          <span>显示</span>
        </p>
        <div class="handbook-item">
          <span class="item-label">设置：</span>
          <el-radio-group>
            <el-radio label="显示"></el-radio>
            <el-radio label="隐藏"></el-radio>
          </el-radio-group>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="button-style" @click="dialogHandbook = false">确 定</el-button>
        <el-button class="button-style" @click="dialogHandbook = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 题目 -->
    <el-dialog class="dialog-topic" v-dialogDrag title="实验题目" :modal="false" :close-on-click-modal="false" :visible.sync="dialogTopicDrag">
      <div class="dialog-body">
        <div class="markdown-body" v-html="resQuestionData.content"></div>
      </div>
    </el-dialog>
    <!-- 报告 -->
    <el-dialog class="dialog-report" v-dialogDrag title="实验报告" :modal="false" :close-on-click-modal="false" :visible.sync="dialogReportDrag" :modal-append-to-body="false">
      <div class="dialog-body">
        <div class="tab-main">
          <div class="clearfix tab-sub">
            <div class="fl" @click="subActiveIndex = 1" :class="{ 'active': subActiveIndex == 1 }">Word版实验报告</div>
            <div class="fl" @click="subActiveIndex = 2" :class="{ 'active': subActiveIndex == 2 }">在线版实验报告</div>
          </div>
          <div class="jx-main-content upload-content" v-show="subActiveIndex == 1">
            <div class="excel-content">
              <div v-if="resQuestionData.fileName" style="margin-bottom:20px;">
                <img src="../../../assets/images/upload-success.png" />
              </div>
              <div style="padding:0px 0 20px;" v-if="resQuestionData.fileName">实验报告已上传</div>
              <div class="button-style" @click="dialogUpload = true">上传实验报告</div>
              <a class="model-download" target="_blank" href="javascript:;" @click="downloadModel">实验报告模板下载
                <i class="iconfont icon-tubiaozhizuo-"></i>
              </a>
            </div>
            <!-- <el-button class="button-style" @click="submitUpload">保 1存</el-button> -->
          </div>
          <div v-show="subActiveIndex == 2" style="height: 480px;">
            <div class="jx-main-content">
              <mavonEditor class="step-main-editor" ref="questionDialog" style="height: 390px;"></mavonEditor>
              <div class="step-main-btn-group" style="text-align:center; margin-top: 20px;">
                <button class="button-style" @click="NoteSave(2)">保存</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 初始化弹窗 -->
    <el-dialog :close-on-click-modal="false" class="dialog-init-virtual" title="提示" :visible.sync="dialogInitVirtual" width="460px">
        <div class="dialog-content">
            <p>初始化会丢失文件、数据，确定要初始化吗?</p>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="button-style" @click="dialogInitVirtual = false">取 消</el-button>
            <el-button class="button-style" @click="DialogInitVirtualSave(0)">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import mavonEditor from "../../../components/mavonEditor";
import axios from "axios";
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  components: {
    mavonEditor
  },
  data() {
    return {
      // 浏览器分辨率
      ScreenSigma: '',
      //上传弹窗
      dialogUpload: false,
      //桌面loading
      deskLoading: false,
      deskLoadingText: "桌面加載中",

      contentLoading: null,
      // 登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
      roles: "",
      // 课程ID
      courseId: "",
      // 章节ID
      chapterId: "",
      // 导航active
      activeIndex: 1,
      // 虚机信息
      VirtualMachineInfo: "",
      // 虚机全屏fullScreen
      fullScreen: false,
      // 虚机地址
      VirtualMachineUrl: "",
      VirtualMachineUrlArr: [],
      // 虚机当前ID数组
      VirtualMachineIdArr: [],
      // 虚机当前容器ID
      VirtualMachineId: "",
      iframeHeight: "",
      // 虚机切换导航列表
      virtualMachineNavList: [],
      // 虚机导航列表index
      MachineNavTabIndex: "0",
      // 虚拟机id
      containerId: "",
      // 实验截图
      dialogScreenshot: false,
      dialogScreenshotCopyUrl: '',
      // 实验截图url
      dialogScreenshotUrl: "",
      // 学生手册
      dialogHandbook: false,
      // 实验题目拖拽
      dialogTopicDrag: false,
      // 实验报告拖拽
      dialogReportDrag: false,

      val: "123",
      // 虚机右侧导航
      mirrorRightWidth: 0,
      // 学生端
      // 试卷ID
      paperId: "",
      fileList: [],
      subActiveIndex: 1,
      tabActiveName: "first",
      //单选
      radio: "",
      //多选
      checkList: [],
      //chose: ["A", "B", "C"],
      chose: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J"],

      //判断题
      radio2: true,
      //当前题
      resQuestionData: "",
      timer: null,
      timeLeft: null,
      //下一个题的id
      nextId: "",
      nowId: "",
      //答案
      answer: "empty",
      //实验报告模板地址
      fileUrl: "",

      // 用户退出删除虚机socket
      UserOutWebsock: null,
      UserOutWebsockOver: null,
      toolbarsMav: {
        bold: true, // 粗体
        italic: false, // 斜体
        header: true, // 标题
        //underline: true, // 下划线
        //strikethrough: true, // 中划线
        //mark: true, // 标记
        //superscript: true, // 上角标
        //subscript: true, // 下角标
        quote: true, // 引用
        ol: true, // 有序列表
        ul: true, // 无序列表
        imagelink: true, // 图片链接
        code: true, // code
        table: true, // 表格
        help: true, // 帮助
        alignleft: true, // 左对齐
        aligncenter: true, // 居中
        alignright: true, // 右对齐
        preview: true, // 预览
        fullscreen: true    // 全屏编辑
      },
      // 初始化弹窗
      dialogInitVirtual: false,
      // 错误提示
    mirrorIframeTip: false,
    mirrorIframeTipText: ''
    };
  },
  created() {
    let self = this;
    //登录角色 ''未登录 TEACHER 教师 ADMIN管理员 STUDENT学生
    self.roles = self.$store.state.user.roles[0];
    // 课程ID
    self.courseId = self.$localstorage.getLocalStorage("setCourseId");
    // 章节ID
    self.chapterId = self.$localstorage.getLocalStorage(
      "chapterInfoData"
    ).chapterId;

    // 考试ID
    self.paperId = self.$route.query.paperId;
    self.ScreenSigma = (window.screen.width / window.screen.height).toFixed(2)
    self.$nextTick(function() {
      self.iframeHeight = $(window).height() - 60
        $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * ($(window).height() - 60))
        $('.jx-virtual-machine-main').height(self.iframeHeight)
        $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
        window.onresize = function () {
            if(self.fullScreen){
                $(".step-main-mirror").width(($(window).width() / self.iframeHeight) * self.iframeHeight)
                setTimeout(() => {
                    $('.mirror-iframe').width($(".step-main-mirror").width() - 1)
                }, 1000);
            }else{
                self.iframeHeight = $(window).height() - 60
                $(".mirror-iframe, .step-main-mirror").width((1024 / 768) * self.iframeHeight)
                $('.jx-virtual-machine-main').height(self.iframeHeight)
                $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
            }
        }

      // 设置编辑器高度
      $(".step-main-editor").css({
        height: $(window).height() - 280 + "px"
      });
      $(".step-main-editor .v-note-wrapper").css({
        height: "100%",
        "z-index": "1"
      });
    });

    // self.init();

    self.timerStart();
    self.startEx();

    // 初始化socket
    // self.InitWebSocket()

  },
  mounted() {
    this.$refs.question.toolbars = this.toolbarsMav;
  },
  destroyed: function() {
    // 每次离开当前界面时，清除定时器
    clearInterval(this.timer);
    this.timer = null;
  },
  methods: {
    init() {
      this.timerStart();
      this.startEx();
    },
    //下载修改文件名
    downloadModel() {
      let that = this;
      //console.log(that.resQuestionData.modelPath,1111);
      that.$downloadfile.download(
        that.resQuestionData.modelPath,
        "实验报告模板.doc"
      );
    },
    //文件上传
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning("只能上传一个文件");
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    submitUpload() {
      let that = this;
      that.$nextTick(function() {
        that.$refs.upload.submit();
        that.dialogUpload = false;
      });
    },
    handleAvatarSuccess(res, file, fileList) {
      console.log(666666);
      if (res.code === 200) {
        this.resQuestionData.fileName = res.data;
        this.$message.success("文件上传成功");
        this.$refs.upload.clearFiles();
      } else {
        this.$message.error(res.message);
      }
    },
    //失败
    uploadError() {
      this.$message.error(res.message);
    },
    //上传中
    uploadProgress(a, b, c) {
      //console.log(a, b, c, 33333);
      //this.$message("文件上传中...");
    },
    clearFiles() {
      if (this.$refs.upload) {
        console.log(4123123);
        //this.$refs.upload.clearFiles();
      }
    },
    //文件上传end

    //定时器
    timerStart() {
      // 每次进入界面时，先清除之前的所有定时器，然后启动新的定时器\
      // console.log(this.resQuestionData);
      clearInterval(this.timer);
      this.timer = null;
      this.setTimer();
    },
    //获取题目
    startEx(questionId) {
      let that = this;
      that.$nextTick(function() {
        //that.clearFiles();
      });
      let paperId = that.$route.query.paperId;
      if (!paperId) {
        that.$message.error("试卷id错误");
      }
      let params = "";
      if (questionId) {
        params = "?questionId=" + questionId;
      }
      axios
        .get(
          "/tes/course/" +
            this.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            paperId +
            "/paper" +
            params
        )
        .then(function(res) {
          // console.log("成功1");
          // console.log(res);
          if (res.status === 200) {
            if (res.data.code === 200) {
              //
              that.resQuestionData = res.data.data;
              that.fileUrl = that.resQuestionData.modelPath;
              that.nowId = res.data.data.id;
              //反显在线版实验报告
              that.$nextTick(function() {
                that.$refs.question.changeVal(res.data.data.report);
                that.MachineNavTab(1);
              });
              //回填
              //that.fillQuestion(that.resQuestionData);
              // console.log(res.data.data, 123);
              // 初始化进入实验
              that.InitExperiment(0);
            }
          }
        })
        .catch(function(err) {
          if (err.response) {
            console.log(err.response);
          }
        });
    },
    //交卷 传答题卡答案 页面跳转回考试列表页面
    submitExam() {
      //row为选中题数据
      let that = this;
      let paperId = that.$route.query.paperId;
      let answerSheetId = that.resQuestionData.answerSheetId;

      if (!paperId) {
        alert("试卷id错误");
      }
      that
        .$confirm("是否交卷?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          axios
            .post(
              //'/course/{courseId}/course-test/paper/{paperId}/student/{answerSheetId}/report'
              "/tes/course/" +
                this.$localstorage.getLocalStorage("setCourseId") +
                "/course-test/paper/" +
                paperId +
                "/student/" +
                answerSheetId +
                "/report"
            )
            .then(function(res) {
              // console.log("成功1");
              // console.log(res);
              if (res.status === 200) {
                if (res.data.code === 200) {
                  that.$message.success("交卷成功");
                  //进入考试页面
                  that.$router.push({
                    path: "/Teaching/MyCourses/Examination/StudentExamList"
                  });
                } else {
                  that.$message.error(res.data.message);
                }
              }
            })
            .catch(function(err) {
              if (err.response) {
                console.log(err.response);
              }
            });
        })
        .catch(() => {});
    },
    //秒转时分
    getHour(sec) {
      var int_minute = Math.floor(sec / 60);
      sec = sec - int_minute * 60;
      var int_second = Math.floor(sec);
      let result = "";
      if (int_minute) {
        result = int_minute + ":" + int_second;
      } else {
        result = int_second;
      }
      return result;
    },
    //定时器 考试时间计算
    setTimer() {
      // console.log(this.timer, 1234567);
      if (this.timer == null) {
        let that = this;
        that.timer = setInterval(() => {
          if (this.resQuestionData) {
            // console.log(1234);
            if (that.resQuestionData.timeLeft <= 0) {
              //that.submitExam();
              that.$message.error("考试已结束");
              //考试到时间 进入考试列表
              that.$router.push({
                path: "/Teaching/MyCourses/Examination/StudentExamList",
                name: "StudentExamList",
                //发送数据临时将当前考试改为考试已结束
                params: {
                  endTimePaperId: that.$route.query.paperId
                }
              });
              return;
            }
            that.resQuestionData.timeLeft--;
            // console.log(that.resQuestionData.timeLeft);
          }
        }, 1000);
      }
    },
    //下载实验报告
    downloadword() {
      // console.log(this.fileUrl);
      this.$downloadfile.download(this.fileUrl, "实验报告模板.doc");
    },
    // 用户退出删除虚机socket
    InitUserOutWebSocket() {
      let self = this;
      let hostname = window.location.host;
      const wsuri =
        "ws://" + hostname + "/tes/ws/experiment/question/" + self.resQuestionData.originQuestionId;
      self.UserOutWebsock = new WebSocket(wsuri);
      self.UserOutWebsock.onopen = self.UserOutwebsocketonopen;
      self.UserOutWebsock.onmessage = self.UserOutwebsocketonmessage;
      self.UserOutWebsockOver = () => {
        self.UserOutWebsock.close();
      };
    },
    UserOutwebsocketonopen() {
      console.log("open sucess");
    },
    UserOutwebsocketonmessage() {
      const redata = JSON.parse(e.data);
      let redataJson = {};
    },
    //通知webSocket
    InitWebSocket() {
      const wsuri = "ws://172.16.100.182:9999/tes/global";
      this.websock = new WebSocket(wsuri);
      this.websock.onopen = this.websocketonopen;
      this.websock.onmessage = this.websocketonmessage;
      this.over = () => {
        this.websock.close();
      };
    },
    websocketonopen() {
      console.log("open sucess");
    },
    websocketonmessage(e) {
      //数据接收
      const redata = JSON.parse(e.data);
      let redataJson = {};
    },
    // 退出虚机
    DropoutVirtual() {
      let self = this;
      self
        .$confirm("确定退出虚机吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
        .then(() => {
          self.$router.push({
            path: "/Teaching/MyCourses/Examination/StudentExamList"
          });
        })
        .catch(() => {});
    },
    // 初始化进入实验
    InitExperiment(index) {
      // index 虚机index
      let self = this;
      self.fullScreen = false;

      self.deskLoading = true;
      self.deskLoadingText = "桌面加載中";
      self.VirtualMachineUrl = "";
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = [];
      self.virtualMachineNavList = [];

      // 关闭实验报告拖拽弹窗
      self.dialogReportDrag = false;
      // 关闭实验题目拖拽弹窗
      self.dialogTopicDrag = false;

      self.$http
        .get(
          "/tes/experiment/question/" + self.resQuestionData.originQuestionId
        )
        .then(response => {
          let res = response.data;

          if (res.code == "200") {
              self.mirrorIframeTip = false
            // 初始化虚拟机信息
            self.VirtualMachineInfo = res.data;

            setTimeout(() => {
                self.iframeHeight = $(window).height() - 60;
                $(".mirror-iframe, .step-main-mirror").width(
                1024 / 768 * ($(window).height() - 60)
                );
                $(".jx-virtual-machine-main").height(self.iframeHeight);
                $(".step-main-content").width(
                $(window).width() - $(".step-main-mirror").width()
                );
            }, 800);

            // 虚机容器ID
            self.VirtualMachineId = res.data.containers[index].containerId;

            self.fullScreen = false;
            let fullData = [];
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId);
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(
                res.data.containers[i].containerRole
              );
              fullData.push(res.data.containers[i].containerId);

            }
             if (res.data.containers[0].fullScreen) {
                self.VirtualFullScreen(1,fullData)
            }
            // 如果含有全屏状态
            // if (!res.data.containers[0].fullScreen) {
            //     self.VirtualFullScreen(1, fullData);
            // }
            setTimeout(() => {
                // 虚机地址默认设置主节点
                self.VirtualMachineUrl = res.data.containers[index].desktopUrl;

                // 虚机地址数组
                self.VirtualMachineUrlArr = res.data.containers
                if(self.VirtualMachineUrlArr.length > 0){
                    // 用户退出删除虚机socket
                    self.InitUserOutWebSocket();
                }
              self.deskLoading = false;
              if(self.ScreenSigma < 1.44){
                self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    closeOnClickModal: false
                }).then(() => {
                    self.VirtualFullScreen(2)
                })
            }
            }, 800);
          }else{
            // self.deskLoading = false
            // self.$message.error(res.message)
            // 错误提示
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
        }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // tab切换
    MachineNavTab(index) {
      let self = this;
      self.activeIndex = index;
    },
    // 实验笔记保存
    NoteSave(tag) {
      // tag 1. 左侧实验手册2.实验手册弹窗
      let self = this;
      let data = {};
      if (tag == 1) {
        data = {
          content: self.$refs.question.value,
          htmlContent: self.$refs.question.getRender()
        };
      } else if (tag == 2) {
        data = {
          content: self.$refs.questionDialog.value,
          htmlContent: self.$refs.questionDialog.getRender()
        };
      }
      self.$http
        .put(
          "/tes/course/" +
            self.$localstorage.getLocalStorage("setCourseId") +
            "/course-test/paper/" +
            self.$route.query.paperId +
            "/student/" +
            self.resQuestionData.answerSheetId +
            "/report/" +
            self.resQuestionData.id,data
        )
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
            self.$message({
              message: "保存成功",
              type: "success"
            });
            if (tag == 2) {
              self.$refs.question.value = self.$refs.questionDialog.value;
            }
          } else {
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 虚机导航列表切换
    MachineNavTab2(index, item) {
      let self = this;
      self.MachineNavTabIndex = index

      self.VirtualMachineId = item.containerId
      // 重新初始化进入实验
    //   self.InitExperiment(index);
    },
    // 刷新虚机
    refreshVirtual(index) {
      let self = this;
      self.MachineNavTabIndex = index;
      // 关闭实验报告拖拽弹窗
      self.dialogReportDrag = false;
      // 关闭实验题目拖拽弹窗
      self.dialogTopicDrag = false;
      // 重新初始化进入实验
    //   self.InitExperiment(index);


      self.deskLoading = true;
      self.deskLoadingText = "桌面加載中";
      self.VirtualMachineUrl = "";
      self.VirtualMachineUrlArr = []
      // 清空虚机切换列表导航集合
      self.VirtualMachineIdArr = [];
      self.virtualMachineNavList = [];
      self.$http
        .get(
          "/tes/experiment/question/" + self.resQuestionData.originQuestionId
        )
        .then(response => {
          let res = response.data;

          if (res.code == "200") {
              self.mirrorIframeTip = false
            // 初始化虚拟机信息
            if(res.data.containers[0].fullScreen){
                self.fullScreen = true;
            }
            // self.VirtualMachineInfo = res.data;
            // // 虚机地址默认设置主节点
            self.VirtualMachineUrl = res.data.containers[index].desktopUrl;

            // // 虚机地址数组
            self.VirtualMachineUrlArr = res.data.containers
            // // 虚机容器ID
            self.VirtualMachineId = res.data.containers[index].containerId;
            let fullData = [];
            for (let i = 0; i < res.data.containers.length; i++) {
              self.VirtualMachineIdArr.push(res.data.containers[i].containerId);
              // 虚机切换列表导航集合
              self.virtualMachineNavList.push(
                res.data.containers[i].containerRole
              );
              fullData.push(res.data.containers[i].containerId);

            }
            if(!res.data.containers[0].fullScreen){
                self.fullScreen = false;
                setTimeout(() => {
                    self.iframeHeight = $(window).height() - 60;
                    $(".mirror-iframe, .step-main-mirror").width(
                    1024 / 768 * ($(window).height() - 60)
                    );
                    $(".jx-virtual-machine-main").height(self.iframeHeight);
                    $(".step-main-content").width(
                    $(window).width() - $(".step-main-mirror").width()
                    );
                }, 800);
            }
            self.deskLoading = false;
          } else {
            self.mirrorIframeTip = true
            self.mirrorIframeTipText = res.message
            self.deskLoading = false
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 初始化虚机
    InitVirtual() {
      let self = this;
      self.dialogInitVirtual = true
    },
    DialogInitVirtualSave(index){
        let self = this
        // 关闭实验报告拖拽弹窗
        self.dialogReportDrag = false;
        // 关闭实验题目拖拽弹窗
        self.dialogTopicDrag = false;
        self.MachineNavTabIndex = 0
        self.VirtualMachineUrl = ''
        self.VirtualMachineUrlArr = []
        self.VirtualMachineIdArr = []
        self.virtualMachineNavList = []
        self.fullScreen = false;

        self.dialogInitVirtual = false
        self.deskLoading = true;
        self.deskLoadingText = "初始化中";
        self.$http.get("/tes/experiment/question/" +self.resQuestionData.originQuestionId +"/init").then(response => {
            let res = response.data;
            if (res.code == "200") {
                // 导航初始化
                // self.MachineNavTabIndex = index;
                self.mirrorIframeTip = false
                // 初始化虚拟机信息
                self.VirtualMachineInfo = res.data;

                setTimeout(() => {
                    self.iframeHeight = $(window).height() - 60
                    $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                    $('.jx-virtual-machine-main').height(self.iframeHeight)
                    $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                }, 800);
                // self.deskLoading = false;


                // 虚机ID
                self.VirtualMachineId = res.data.containers[index].containerId;

                let fullData = [];
                for (let i = 0; i < res.data.containers.length; i++) {
                    self.VirtualMachineIdArr.push(
                        res.data.containers[i].containerId
                    );
                    // 虚机切换列表导航集合
                    self.virtualMachineNavList.push(
                        res.data.containers[i].containerRole
                    );
                    // 如果含有全屏状态
                    if (res.data.containers[i].fullScreen) {
                        fullData.push(res.data.containers[i].containerId);
                        self.VirtualFullScreen(1, fullData);
                    }
                }

                // self.$message({
                //   type: "success",
                //   message: "初始化成功!"
                // });

                // if(self.ScreenSigma < 1.44){
                //     self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                //         confirmButtonText: '确定',
                //         cancelButtonText: '取消',
                //         type: 'warning',
                //         closeOnClickModal: false
                //     }).then(() => {
                //         self.VirtualFullScreen(2)
                //     })
                // }
                setTimeout(() => {
                    // 虚机地址默认设置主节点
                    self.VirtualMachineUrl = res.data.containers[index].desktopUrl;

                    // 虚机地址数组
                    self.VirtualMachineUrlArr = res.data.containers
                    self.deskLoading = false
                    self.$message({
                        type: 'success',
                        message: '初始化成功!'
                    })
                    if(self.ScreenSigma < 1.44){
                        self.$confirm('系统检测到您的系统分辨率太小，是否切换到全屏模式？', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning',
                            closeOnClickModal: false
                        }).then(() => {
                            self.VirtualFullScreen(2)
                        })
                    }
                }, 5000);
            } else {
                setTimeout(() => {
                    self.iframeHeight = $(window).height() - 60
                    $(".mirror-iframe, .step-main-mirror").width($(window).width() - $('.step-main-content').width())
                    $('.jx-virtual-machine-main').height(self.iframeHeight)
                    $(".step-main-content").width($(window).width() - $(".step-main-mirror").width())
                }, 800);
                self.mirrorIframeTip = true
                self.mirrorIframeTipText = res.message
                self.deskLoading = false
            }
        }).catch(err => {
            console.log(err);
        });
    },
    // 全屏
    VirtualFullScreen(index, fullData) {
      let self = this;
      const loading = self.$loading({
            lock: true,
            text: '虚机切换中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
      // self.$http.get('/tes/experiment/container/'+self.VirtualMachineId+'/display?length='+$(window).width()+'&width='+self.iframeHeight).then(response => {
      let data = {};
      if (index == 1) {
        data = {
          containerIds: fullData,
          length: "1024",
          width: "768",
          fullScreen: false
        };
      } else if (index == 2) {
        data = {
          containerIds: self.VirtualMachineIdArr,
          length: window.screen.availWidth,
          width: self.iframeHeight,
          fullScreen: true
        };
      } else if (index == 3) {
        // 退出全屏
        // 关闭实验报告拖拽弹窗
        self.dialogReportDrag = false;
        // 关闭实验题目拖拽弹窗
        self.dialogTopicDrag = false;

        data = {
          containerIds: self.VirtualMachineIdArr,
          length: "1024",
          width: "768",
          fullScreen: false
        };
      }
      self.$http
        .post("/tes/experiment/container/display", data)
        .then(response => {
          let res = response.data;
          if (res.code == "200") {
              // 关闭loading
               loading.close()
            if (index == 2) {
              self.fullScreen = true;
              $(".step-main-mirror").width(
                $(window).width() / self.iframeHeight * self.iframeHeight
              );
              setTimeout(() => {
                $(".mirror-iframe").width($(".step-main-mirror").width() - 1);
              }, 1000);
            } else if (index == 3 || index == 1) {
              self.fullScreen = false;
              setTimeout(() => {
                self.iframeHeight = $(window).height() - 60;
                $(".mirror-iframe, .step-main-mirror").width(
                  1024 / 768 * ($(window).height() - 60)
                );
                $(".jx-virtual-machine-main").height(self.iframeHeight);
                $(".step-main-content").width(
                  $(window).width() - $(".step-main-mirror").width()
                );
              }, 1000);
            }
          } else {
              // 关闭loading
              loading.close()
            self.$message.error(res.message);
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 实验截图
    ExperimentScreenshot() {
      let self = this;
      var vir = document.getElementById('VirtualMachineIframe' + self.VirtualMachineId)
      self.dialogScreenshotUrl = self
        .convertCanvasToImage(
          vir.contentWindow.document.getElementsByTagName("canvas")[0]
        )
        .getAttribute("src");

      self.$http.post('/tes/base64/file-save',{
            'base64Info' : self.dialogScreenshotUrl
        }).then(response => {
            let res = response.data
            if(res.code == '200'){
                self.dialogScreenshotCopyUrl = res.data
                self.dialogScreenshot = true
            }
        })
    },
    convertCanvasToImage(canvas) {
      let image = new Image();
      image.crossOrigin = "anonymous";
      image.src = canvas.toDataURL("image/png");
      return image;
    },
    // 实验截图复制
    dialogScreenshotCopy() {
      let self = this;
      var clipboard = new self.Clipboard('.dialog-screenshot .button-style')
        clipboard.on('success', e => {
            self.$message({
                message: '复制成功，请在编辑器粘贴',
                type: 'success'
            })
            self.dialogScreenshot = false
            e.clearSelection();
        })
        clipboard.on('error', e => {
            // 不支持复制
            console.log('该浏览器不支持自动复制')
            // 释放内存
            clipboard.destroy()
        })
    },
    // 实验截图保存下载图片
    dialogScreenshotSave() {
      let self = this;
      self.downloadFile("截图.png", self.dialogScreenshotUrl);
    },
    // 下载
    downloadFile(fileName, content) {
      let aLink = document.createElement("a");
      let blob = this.base64ToBlob(content); //new Blob([content]);

      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = fileName;
      aLink.href = URL.createObjectURL(blob);

      // aLink.dispatchEvent(evt);
      aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
    },
    // base64转blob
    base64ToBlob(code) {
      let parts = code.split(";base64,");
      let contentType = parts[0].split(":")[1];
      let raw = window.atob(parts[1]);
      let rawLength = raw.length;

      let uInt8Array = new Uint8Array(rawLength);

      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
      }
      return new Blob([uInt8Array], { type: contentType });
    },
    // 实验题目弹窗
    TopicDialog() {
      let self = this;
      self.dialogTopicDrag = true;
    },
    // 实验报告弹窗
    ReportDialog() {
      let self = this;
      self.dialogReportDrag = true;

      self.$nextTick(() => {
        self.$refs.questionDialog.value = self.$refs.question.value;
        self.$refs.questionDialog.toolbars = self.toolbarsMav;
      });
    },
    // 虚机右侧菜单显示隐藏
    MirrorArrowFn() {
      let self = this;
      if (self.mirrorRightWidth == -144) {
        self.mirrorRightWidth = 0;
      } else {
        self.mirrorRightWidth = -144;
      }
    }
  }
};
</script>


<style lang="scss" >
@import "./../../../styles/layout/color_variables";
#jx-start-virtual-machine {
  .el-upload-list{
    .el-icon-close:before{
      content:"\E612"
    }
  }
//   .button-style:focus{
//     background:none;
//   }
  .model-download {
    position: absolute;
    right: 0;
    top: 0;
  }
  position: relative;
  height: 100%;
  overflow: hidden;
  .upload-content {
    text-align: center;
  }
  .excel-content {
    position: relative;
    padding-top: 120px;
    min-height: 300px;
    justify-content: center;
    align-items: center;
    .upload-demo {
      position: relative;
      .el-upload-list {
        position: absolute;
        left: 26px;
        top: 40px;
        li {
          text-align: left;
        }
      }
    }
    .button-style {
      margin-right: 10px;
    }
    a {
      vertical-align: middle;
    }
  }
  .upload-file {
    margin: 10px 0 0 0;
    .iconfont {
      font-size: 24px;
      vertical-align: sub;
      color: $blue;
      margin: 0 0 0 10px;
    }
  }
  .tab-main {
    .jx-main-content {
      width: 100%;
      height: 100%;
      line-height: 24px;
      background: $white;
      padding: 20px;
      box-sizing: border-box;

      p {
        line-height: 24px;
      }
      img {
        max-width: 100%;
      }
    }
  }
  .tab-sub {
    background: #f8f8f8;
    padding: 20px 20px 0;
    > div {
        line-height: 40px;
        font-size: 14px;
        padding: 10px 20px;
        cursor: pointer;
    }
    .active {
        background: #fff;
        color: $blue;
        border-radius: 5px 5px 0 0;
    }
    span{
        float: right;
        line-height: 60px;
        color: #474747;
        em{
            color: #1277eb;
        }
    }
  }
  .el-dialog__footer {
    text-align: center;
    .dialog-footer {
      .el-button {
        width: 90px;
      }
    }
  }
  .jx-virtual-machine-header {
    height: 60px;
    line-height: 60px;
    background: #101937;
    color: $white;
    .jx-virtual-machine-header-logo {
      margin-left: 40px;
      font-size: 16px;
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      margin-top: 30px;
    }
    .jx-virtual-machine-nav {
      margin: 20px 0 0 30px;
      float: left;
      height: 40px;
      line-height: 40px;
      span {
        width: 90px;
        color: $white;
        cursor: pointer;
        text-align: center;
        border-radius: 5px 5px 0 0;
        transition: 0.3s;
        // &:hover{
        //     background: $white;
        //     color: #101937;
        // }
        &.active {
          background: $white;
          color: #101937;
        }
      }
    }
    .jx-virtual-machine-nav2 {
      width: 47%;
      float: right;
      @extend .jx-virtual-machine-nav;
    }
    .jx-virtual-machine-header-dropout {
      height: 60px;
      line-height: 60px;
      i {
        color: #fff;
        font-size: 20px;
        margin-right: 20px;
        cursor: pointer;
      }
    }
    .jx-virtual-machine-header-info {
      margin-right: 40px;
      height: 60px;
      span {
        vertical-align: top;
      }
      i {
        font-size: 18px;
        margin-left: 12px;
        cursor: pointer;
        vertical-align: -webkit-baseline-middle;
      }
    }
  }
  .jx-virtual-machine-main {
    position: relative;
    width: 100%;
    overflow: hidden;
    .step-main-content {
      height: 100%;
      background: #fff;
      overflow-x: scroll;
      &::-webkit-scrollbar {
          width: 5px;
          height:0;
      }

      &::-webkit-scrollbar-thumb {
          background: #c1c1c1;
      }
      .step-main-content-text {
        width: 100%;
        background: $white;
        margin-top: 10px;
        .display-hide-btn {
          float: right;
          margin: 10px 10px 20px 0;
        }
      }
      .step-main-btn-box {
        overflow: hidden;
        padding: 12px 16px 15px 15px;
        text-align: right;
        i {
          color: #385899;
          font-size: 16px;
          line-height: 16px;
          vertical-align: top;
          cursor: pointer;
        }
      }
      .step-main-btn-group {
        text-align: center;
        margin-top: 20px;
        button {
          width: 90px;
          &:first-child {
            // background: $btn-blue;
            // color: #fff;
            margin-right: 5px;
          }
        }
      }
    }
    .step-main-mirror {
      position: relative;
      width: 65%;
      height: 100%;
      // overflow-x: auto;
      // &::-webkit-scrollbar {
      //     width: 6px;
      // }
      // &::-webkit-scrollbar-thumb {
      //     background: #4d5368;
      //     border-radius: 6px;
      // }
      .mirror-iframe-tip{
            text-align: center;
            img{
                margin-top: 20%;
            }
            .mirror-iframe-tip-text{
                display: block;
                font-size: 16px;
                color: #727272;
                margin: 28px 0 18px;
            }
        }
      .step-main-mirror-dialog {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 144px;
        box-sizing: border-box;
        background: #2e2f33;
        transition: 0.3s;
        .step-main-mirror-dialog-block {
          height: 100%;
          overflow-x: scroll;
          padding: 0 24px;
          &::-webkit-scrollbar {
            width: 3px;
            height: 0;
          }

          &::-webkit-scrollbar-thumb {
            background: $white;
          }
        }
        .mirror-dialog-header {
          font-size: 14px;
          line-height: 18px;
          color: $white;
          padding: 20px 0;
          span {
            font-size: 18px;
            line-height: 18px;
            font-weight: 400;
            vertical-align: bottom;
          }
        }
        .mirror-dialog-item {
          border-top: solid 1px rgba(255, 255, 255, 0.3);
          padding: 15px 0;
          .item-btn {
            position: relative;
            line-height: 40px;
            font-size: 14px;
            color: $white;
            span{
                cursor: pointer;
                &:hover{
                    color: #1277eb;
                }
            }
            i {
              // float: left;
              width: 22px;
              text-align: left;
              // margin-right: 5px;
              display: inline-block;
              vertical-align: -webkit-baseline-middle;
              &.icon-guanbifenxiang {
                font-size: 14px;
              }
              &:hover{
                color: #1277eb;
            }
            }
          }
        }
        .mirror-dialog-btn-box {
          border-top: solid 1px rgba(255, 255, 255, 0.3);
          padding-top: 35px;
          .button-style {
            width: 100%;
            border-color: #fff;
            color: #fff;
            margin-bottom: 20px;
            &:hover {
              background: none;
            }
            &:focus{
                background: none;
            }
          }
        }
      }
      .step-main-mirror-arrow {
        position: absolute;
        top: 20%;
        right: 144px;
        width: 22px;
        height: 80px;
        line-height: 80px;
        text-align: center;
        background: #2e2f33;
        border-radius: 4px 0 0 4px;
        padding: 5px 0;
        cursor: pointer;
        transition: 0.2s;
        div {
          color: #fff;
          font-size: 14px;
          width: 22px;
          line-height: 26px;
          // &:after{
          //     content: '\003C';
          // }
          // &.active{
          //     &:after{
          //         content: '\003E';
          //     }
          // }
        }
      }
      .step-main-mirror-side {
        position: absolute;
        bottom: 50px;
        right: 150px;
        // width: 240px;
        height: 60px;
        background: #1c1f21;
        color: $white;
        text-align: center;
        border-radius: 5px;
        z-index: 2;
        li {
          float: left;
          width: 60px;
          height: 36px;
          display: block;
          font-size: 12px;
          margin-top: 14px;
          position: relative;
          cursor: pointer;
          border-right: solid 1px #353636;
          box-sizing: border-box;
          &:hover{
                color: #dfdfdf;
            }
          &:last-child {
            border-right: none;
          }
          .iconfont {
            display: block;
            margin-bottom: 2px;
            font-size: 20px;
          }
        }
      }
    }
  }
  //实验截图
  .dialog-screenshot {
    .dialog-content {
      img {
        width: 763px;
        height: 440px;
      }
    }
  }
  //视频拖拽
  .dialog-video {
    position: absolute; /*定位*/
    top: 0;
    left: 0;
    width: 800px;
    overflow: hidden;
    height: max-content;
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      margin-top: 0 !important;
      margin-bottom: 0;
    }
    .el-dialog__body {
      // height: 438px;
      padding: 0;
    }
  }
  .dialog-topic {
    position: absolute; /*定位*/
    top: 10%;
    left: 40%;
    width: 800px;
    overflow: hidden;
    height: max-content;
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      margin-top: 0 !important;
      margin-bottom: 0;
    }
    .el-dialog__body {
      // height: 438px;
      padding: 0;
    }
    .markdown-body {
      padding: 20px;
      max-height: 400px;
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 3px;
      }

      &::-webkit-scrollbar-thumb {
        background: #5281c6;
      }
    }
  }
  //手册拖拽
  .dialog-report {
    position: absolute; /*定位*/
    top: 20%;
    left: 35%;
    width: 800px;
    // height: 484px;
    overflow: hidden;
    height: max-content;
    .el-dialog__header {
      cursor: move;
    }
    .el-dialog {
      width: 100%;
      margin-top: 0 !important;
      margin-bottom: 0;
      .el-dialog__body {
        overflow: auto;
        background: #f8f8f8;
        .v-note-wrapper {
          height: 100%;
        }
      }
    }
    .tab-main {
      padding: 0;
    }
    .tab-sub {
      > div {
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        padding: 0 20px;
        cursor: pointer;
      }
    }
  }
}
</style>
